<script setup>
import { ref, defineEmits } from 'vue';
import { cardColor, cardColor1, label } from '../utils/data';
import { useUserIdStore } from '../stores/user';
import Button from './Button.vue';
import { getObjectURL } from '../utils/function';
import { insertWallApi,profileApi } from '../api/index.js';
import MessageObj from './remind/message/message.js';

const props = defineProps({
    id: {
        default: 0,
        type: Number,
    }
})
const emit = defineEmits([
    'closeModal',
    'clickSubmit'
]);
const colorSelect = ref(0); //选择的颜色
const changeColor = (index) => {
    colorSelect.value = index;
}
const labelSelect = ref(0); //选择的标签
const changeLabel = (index) => {
    labelSelect.value = index;
}
const message = ref('');//留言内容


//colseModal关闭弹窗'

const closeModal = (data) => {
    emit('closeModal', data);
}

//提交新建wall
const id = ref(props.id);
const userIdStore = useUserIdStore();
const user = ref(userIdStore.user);
const name = ref('');//留言签名
const submitCard = async () => {
    if (name.value !== '' ) {
        name.value = name.value;
    }else{
        name.value = '匿名';
    }
    let data = {
        type: id.value, // 这里应该使用 id.value 来获取响应式数据的值
        message: message.value,
        name: name.value,
        userId: user.value,
        moment: new Date(),
        label: labelSelect.value,
        color: colorSelect.value,
        imgurl: '',
    };
    if (id.value === 0) {
        if (message.value) {
            data.color = colorSelect.value; 
        insertWallApi(data).then((res) => {
            console.log(res);
            let cardD = {
                id: res.message.insertId,
                type: id.value,
                message: message.value,
                name: name.value,
                userId: user.value,
                moment: new Date(),
                label: labelSelect.value,
                color: colorSelect.value,
                imgurl: '',
                islike: [{ count: 0 }],
                like: [{ count: 0 }],
                comcount: [{ count: 0 }],
                report: [{ count: 0 }],
                revoke: [{ count: 0 }]
            };
            //提交数据成功后，清空输入框
            message.value = '';
            name.value = '';
            //告诉父组件提交成功,更新页面

            emit("clickSubmit", cardD);
            MessageObj({ type: 'success', message: '提交成功，感谢你的记录！' })
        })
        }else {
            MessageObj({ type:'error', message: '请输入留言内容！' })
        }

    }else if (id.value === 1 && url.value !== '') {
        if(message.value){
            submitPhoto(data);
        }else {
            MessageObj({ type:'error', message: '请输入留言内容！' })
        }
      
    }
};

//上传图片
const url = ref('');
const showPhoto = () => {
    let aa = getObjectURL(document.getElementById('file').files[0]);
    url.value = aa;
}

//图片提交
const submitPhoto = (data) => {
    let file = document.getElementById('file');
    if(file.files.length > 0){
        let formData = new FormData(); 
        formData.append('file', file.files[0]); // 这里的 'file' 是表单字段的名称，需要与后端一致
        //提交后端
        profileApi(formData).then((res) => {
            //打印出文件路径
            console.log(res);
            data.imgurl = res;
            insertWallApi(data).then((result) => {
            console.log(result);
            let cardD = {
                id: result.message.insertId,
                type: id.value,
                message: message.value,
                name: data.name,
                userId: user.value,
                moment: new Date(),
                label: labelSelect.value,
                color: 5,
                imgurl:  data.imgurl,
                islike: [{ count: 0 }],
                like: [{ count: 0 }],
                comcount: [{ count: 0 }],
                report: [{ count: 0 }],
                revoke: [{ count: 0 }]
            };
            //提交数据成功后，清空输入框
            message.value = '';
            name.value = '';
            //告诉父组件提交成功,更新页面
            emit("clickSubmit", cardD);
            MessageObj({ type: 'success', message: '提交成功，感谢你的记录！' })
        })
        })
    }
}


//接口测试使用
// const aipTest = async () => {
//     let data = {
//         type: 0,
//         message: '测试内容',
//         name: '测试签名',
//         userId: '32',
//         moment: new Date(),
//         label: 0,
//         color: 0,
//         imgurl: 'www.baidu.com',
//     };
//     try {
//         const res = await axios.post('http://localhost:3000/insertwall', data);
//         console.log(res);
//     } catch (error) {
//         // 捕获请求过程中可能出现的错误
//         console.error('请求出错:', error);
//     }
// };

</script>

<template>
    <div class="new-card">
        <div class="colors" v-show="id === 0">
            <p class="color-li" v-for="(item, index) in cardColor1" :key="index" :style="{ background: item }"
                :class="{ colorselected: index === colorSelect }" @click="changeColor(index)"></p>
        </div>
          <!-- 照片 -->
        <div class="add-photo" v-if="id === 1">
            <input 
            type="file" 
            name="file" 
            id="file" 
            multiple="multiple" 
            class="file" 
            @change="showPhoto"
            />
            <div class="add-bt" v-if="url ==''">
                <span class="iconfont icon-jiahao"></span>
            </div>
            <div class="change-bt" v-if="url !=''">
                <span class="iconfont icon-xiugai"></span>
            </div>
            <div class="photo-div">
                <img :src="url" />
            </div>
        </div>
      
         <!-- 卡片 -->
        <div class="card-main" :style="{ background:id === 0? cardColor[colorSelect]:cardColor[5]}">
            <textarea placeholder="留言..." class="message" maxlength="96" v-model="message"></textarea>
            <input type="text" placeholder="签名" class="name" v-model="name" />
        </div>
        <div class="labels">
            <p class="title">选择标签</p>
            <div class="label-li">
                <p v-for="(item, index) in label[id]" :key="index" class="label-item"
                    :class="{ labelselected: index === labelSelect }" @click="changeLabel(index)">{{ item }}</p>
            </div>
        </div>
        <div>
            <p class="title">免责声明</p>
            <p class="mzsm">
                一刻时光是本人独自开发的，为便于与用户交流的留言平台。请不要利用此平台服务制作、上传、下载、复制、发布、传播或者转载如下内容:
                <br />1、反对宪法所确定的基本原则的;
                <br />2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的;
                <br />3、损害国家荣誉和利益的;
                <br />4、煽动民族仇恨、民族歧视，破坏民族团结的;
                <br />5、破坏国家宗教政策
                <br />6、散布谣言，扰乱社会秩序，破坏社会稳定的;
                <br />7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的;
                <br />8、侮辱或者诽谤他人，侵害他人合法权益的;
                <br />9、含有法律、行政法规禁止的其他内容的信息。
                <br /> <br /><br /><br /><br /><br /><br />
            </p>
        </div>
        <div class="footbt">
            <Button size="max" nom="secondary" @click="closeModal(0)">丢弃</Button>
            <Button size="submit" class="submit" @click="submitCard()">确定</Button>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../assets/fonts/icon/iconfont.css';
.new-card {
    padding: 0 @padding-20;
    position: relative;

    .colors {
        padding-bottom: @padding-12;
        height: 36px;
        display: flex;
        align-items: center;

        .color-li {
            width: 24px;
            height: 24px;
            margin-right: @padding-8;
        }

        .colorselected {
            border: 2px solid #409EFF;
        }
    }

   .add-photo {
    padding-bottom: 20px;
    position: relative;
    #file {
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      height: 74px;
      width: 64px;
      opacity: 0;
      cursor: pointer;
     }
     .add-bt {
         width: 64px;
         height: 64px;
         border: 2px solid @gray-3;
         border-radius: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         .icon-jiahao {
             font-size: 32px;
             color: @gray-3;
         }
     }
     .photo-div {
         max-height: 200px;
         width: 100%;
         background: #f0f0f0;
         overflow: hidden;
         display: flex;
         align-items: center;
         img{
            width: 100%;
         }
     }
    .change-bt {
        position: absolute;
        top: 12px;
        right: 12px;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-tuichu {
            color: #fff;
         }
    }
}
    .card-main {
        height: 240px;
        width: 100%;
        background: rgba(252, 175, 162, 0.31);
        padding: @padding-12;
        box-sizing: border-box;
        transition: @tr;

        .message {
            font-family: fa;
            font-size: 16px;
            width: 100%;
            height: 172px;
            padding: @padding-8;
            box-sizing: border-box;
            background: none;
            border: none;
            resize: none; // 禁止用户调整元素的大小;
        }

        .name {
            font-family: fa;
            width: 100%;
            height: 36px;
            font-size: 16px;
            box-sizing: border-box;
            background: none;
            padding: @padding-8;
            border-top: 2px solid #fff;
            border-left: none;
            border-right: none;
            border-bottom: none;
            line-height: 20px;
        }
    }

    .labels {
        .title {
            color: @gray-1;
            font-weight: 600;
            padding-top: 30px;
            padding-bottom: 2px;
        }

        .label-li {
            display: flex;
            flex-wrap: wrap;
            width: 320px;

            .label-item {
                font-size: 14px;
                color: @gray-2;
                padding: 2px 10px;
                border-radius: 20px;
                margin: 16px @padding-4 0 0;
                cursor: pointer;
                transition: @tr;
            }

            .labelselected {
                background: #EBEBEB;
                font-weight: 600;
                color: @gray-1;
            }
        }
    }

    .title {
        color: @gray-2;
        font-weight: 600;
        padding-top: 30px;
        padding-bottom: @padding-12;
    }

    .mzsm {

        font-size: 12px;
        color: @gray-3;
    }

    .footbt {
        display: flex;
        padding: @padding-20;
        position: fixed;
        width: 100%;
        bottom: 52px;
        left: 0;
        background-color: #EBEBEB;
        backdrop-filter: blur(10px); // 模糊效果;
        box-sizing: border-box;
    }
}
</style>
